﻿<!DOCTYPE html>
<!--隐患排查内容管理编辑-->

表合并

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <link href="../static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="../static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        body {
            padding-bottom: 10px;
        }

        .vue-treeselect_style .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
</head>

<body>
    <el-col id="app" v-cloak class="popupW100">
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">




            <el-row>
                <!-- <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.Unit" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Unit+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col> -->
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.Objective" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Objective+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.Objective.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini vue-treeselect_style">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.PersonInCharge+mark.m}}
                                </template>
                                <treeselect v-model="Form.PersonInCharge" :options="PersonInCharge" :flat="true"
                                    :show-count="true" :disable-branch-nodes="true" slot="suffix"
                                    style="line-height: 28px;" placeholder="请选择" />
                            </el-input>

                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="11">
                    <div class="elst-select-mini vue-treeselect_style">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Participant+mark.m}}
                                </template>
                                <treeselect v-model="Form.Participant" :multiple="true" :options="Participant"
                                    :flat="true" :show-count="true" :disable-branch-nodes="true" slot="suffix"
                                    style="line-height:14px;" placeholder="请选择" />
                            </el-input>

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" offset="2">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.Requirements" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Requirements+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.Requirements.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.Content" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Content+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.Content.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        <div> {{RisksManagement.RiskContent.StandardType+mark.m}}</div>
                                    </template>
                                    <el-select @visible-change="visibleChange" v-model="Form.StandardType" slot="suffix"
                                        :placeholder="RisksManagement.RiskContent.StandardType">
                                        <el-option label="请选择" value=""></el-option>
                                        <el-option v-for="item in StandardType" :label="item.value" :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>
                <el-col :span="11">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        <div> {{RisksManagement.RiskContent.InvestigationPost+mark.m}}</div>
                                    </template>
                                    <el-select @visible-change="visibleChange" v-model="Form.InvestigationPost" slot="suffix"
                                        :placeholder="RisksManagement.RiskContent.InvestigationPost">
                                        <el-option label="请选择" value=""></el-option>
                                        <el-option v-for="item in InvestigationPost" :label="item.value"
                                            :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>
                <el-col :span="8" offset="2">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.FrequencyText" autocomplete="off" size="mini" readonly>
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Frequency+mark.m}}
                                </template>

                            </el-input>

                        </el-form-item>

                    </div>
                </el-col>
                <el-col :span="2" offset="0">
                    <div class="elst-select-mini">
                        <el-button type="primary" @click="onSetFrequency" style="height:28px;margin:1px 0 0 5px;">
                            {{col.btnSetFrequency}}</el-button>
                    </div>
                </el-col>
                <!--<el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Frequency+mark.m" prop="Frequency" class="inputTextarea">
                        <el-button type="primary" @click="onSetFrequency">{{col.btnSetFrequency}}</el-button>
                        <label style="color:#606266;">{{Form.FrequencyText}}</label>
                    </el-form-item>
                </el-col>-->
            </el-row>
            <!--归口部门-->
            <el-row>
                <el-col span="4" style="font-size: 14px;color: #606266;margin-left:10px;">
                    {{RisksManagement.RiskContent.Unit+mark.m}}
                </el-col>
                <el-col span="24">
                    <tree-department :value="Form.Unit" :multiple="true" v-on:input="input"></tree-department>
                </el-col>
            </el-row>
            <el-form :inline="true">
                <br>
                <el-row type="flex" justify="begin">

                    <el-form-item>
                        <el-button type="primary" @click="InputInputStand('tj')">新增标准知识库</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="InputInputManagement('tj')">新增基础管理类</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="onDelete">{{col.btnDelete}}</el-button>
                    </el-form-item>


                </el-row>
            </el-form>
            <!--ListItem.tableHeight   :row-key="getRowKeys"-->
            <el-table ref="table" :data="ListItem.tableData" :height="400" border
                @selection-change="handleSelectionChange" :span-method="objectSpanMethod" row-style="height:10px"
                style="width: 100%;margin:0 auto;margin-bottom:20px;">
                <el-table-column type="selection" style="padding-top: 0px;padding-bottom: 0px;" align="center"
                    width="55" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="AddClass" :label="RisksManagement.RiskContent.AddClass">
                </el-table-column>
                <el-table-column prop="Project" :label="RisksManagement.RiskContent.Project">
                </el-table-column>
                <el-table-column prop="Region" :formatter="getDicValue" :label="RisksManagement.RiskContent.Region">
                </el-table-column>
                <el-table-column prop="Remark" :label="RisksManagement.RiskContent.Remark">
                </el-table-column>
                <el-table-column prop="Standard.data" :label="RisksManagement.RiskContent.Standard">
                </el-table-column>
                <el-table-column prop="RiskLevel" :label="RisksManagement.RiskContent.RiskLevel" width="100">
                </el-table-column>
                <el-table-column width="53" prop="update" :label="col.btnUpdate" fixed="right">
                    <template slot-scope="scope">
                        <button type="button" class="elst-bt-xg"
                            @click="deleteRow(scope.$index, Form.InputTable)">
                            <i class="el-icon-delete"></i>
                        </button>
                    </template>
                </el-table-column>

            </el-table>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Remark+mark.m" prop="Remark"
                        class="inputTextarea">
                        <!-- 弹出页的其它不能成组的控件添加class="inputTextarea"，达到label与input、select等控件的label对齐的目的 -->
                        <el-input type="textarea" v-model="Form.Remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog :title="dialogTilte" fullscreen="true" :visible.sync="ListItem.dialogVisible" @close='closeDialog'
            width="80%" height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>

        </>
        <script type="text/javascript">
            Vue.component('treeselect', VueTreeselect.Treeselect)
            app = new Vue({
                el: '#app',
                data: {
                    //父业传参
                    id: '',
                    dialogTilte: '',
                    //业务表单内容
                    //设置频次dialog是否展示
                    //SetFrequencydialogVisible: false,
                    //SetFrequencyInputUrl: '',
                    ListItem: ListItem,
                    mydata: PersonInChargeTree,
                    Region: myTree,
                    Unit: [],
                    Form: {
                        id: guidEmpty,
                        Unit: [],
                        Objective: '',
                        PersonInCharge: null,
                        Participant: null,
                        Requirements: '',
                        Content: '',
                        StandardType: '',
                        InvestigationPost: '',
                        Remark: '',
                        FrequencyText: '',
                        Frequency: '',
                        InputTable: [],
                    },
                    PersonInCharge: [],
                    Participant: [],
                    StandardType: [],
                    InvestigationPost: [],
                    spanArr: [],
                    //表单验证
                    rules: {
                        //JobSteps: [
                        //    verification.NotNull,
                        //],
                        //Task: [
                        //    verification.NotNull,
                        //],
                        //RiskLevel: [
                        //    verification.NotNull
                        //],
                        //CheckStandard: [
                        //    verification.NotNull,
                        //    { pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 200), trigger: 'blur' }
                        //],
                        //RiskOfViolation: [
                        //    verification.NotNull,
                        //    { pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 200), trigger: 'blur' }
                        //]
                    }
                },
                methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                    //删除列表行
                    deleteRow: function (index, rows) {
                        rows.splice(index, 1);
                    },
                    //排查部门input
                    input: function (value) {
                        this.Form.Unit = value;
                    },
                    //提交数据
                    onSubmitForm: function (formName) {
                        var mythis = this;
                        this.$refs[formName].validate(function (valid) {
                            //验证通过
                            if (valid) {
                                onSubmitForm(this, '/api/RiskContent/Save', mythis.Form);
                            } else {
                                //验证失败
                                return false;
                            }
                        });

                    },
                    //获取input数据
                    getData: function () {
                        getData(this, '/api/RiskContent/get?id=' + this.id);
                        console.log('Form', this.Form)
                    },
                    //设置频次
                    onSetFrequency: function () {
                        //var url = 'RiskContentSetFrequency.html', id = this.id;
                        //this.SetFrequencyInputUrl = url + "?id=" + id + "&t=" + Date.parse(new Date());
                        //this.SetFrequencydialogVisible = true;
                        this.dialogTilte = "设置频次";
                        DialogShow(this, "xg", "RiskContentSetFrequency.html", this.id);
                        //this.getData();
                        //this.ListItem.tableData = this.Form.InputTable;
                    },
                    //以下是该input内的表格方法
                    //表格数据格式化
                    getDicValue: function (row, column, cellValue, index) {
                        switch (column.property) {
                            case "Region":
                                return getTreeValue(this.Region, cellValue)
                                break;
                            case "RiskLevel":
                                return getDicValue('03', cellValue)
                                break;
                            default:
                        }

                    },
                    //列表选择触发
                    handleSelectionChange: function (val) { handleSelectionChange(this, val); },
                    //合并行
                    objectSpanMethod: function (row, column, rowIndex, columnIndex) {
                        //声明列对象，行对象
                        var columnIndex = row.columnIndex, rowIndex = row.rowIndex
                        //判断需要合并的列
                        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
                            //读取当前行的合并数量
                            var _row = this.spanArr[rowIndex];
                            //console.log('输出合并行序列',rowIndex, _row)
                            //如果当前行合并，则对应列为1，否则0（0为不显示）
                            var _col = _row > 0 ? 1 : 0;
                            return [_row, _col]
                        }
                    },
                    //删除方法(Comm中没有适配的delete方法，故仿写一份)
                    //（遗留问题2：删除后，合并行方案未更新，导致剩余的新内容合并错误，例：32432，删除第一行后应变为2432，但实际为3243，或32432删除第二行应为3432，但实际依旧是3243
                    //原计划为重新调用合并行方法，但依旧存在问题）
                    //已于20190617修正
                    onDelete: function () {
                        var mythis = this;
                        var url = '/api/RiskContent/DeleteInputTable';
                        if (mythis.ListItem.tableMultipleSelection.length == 0) {
                            showMessage(msg.AtLeastOne, 'error')
                            return;
                        }
                        mythis.$confirm(' 是否确认继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            var delIds = [];
                            for (var i = 0; i < mythis.ListItem.tableMultipleSelection.length; i++) {
                                var item = mythis.ListItem.tableMultipleSelection[i];
                                delIds.push(item.id);
                            }
                            myAjax("post", mythis, url, delIds, function (response) {
                                mythis.getData();
                                mythis.ListItem.tableData = mythis.Form.InputTable;
                                mythis.getSpanArr(mythis.ListItem.tableData);
                                showMessage(msg.OperatingOk, "success");
                            });
                        }).catch(function () {
                            showMessage("已取消删除!");
                        });
                    },
                    //合并行方法
                    getSpanArr: function (data) {
                        console.log(data)
                        //生成合并行数据组
                        this.spanArr = [];
                        var spanArr = this.spanArr;
                        //console.log('Begin', this.spanArr);
                        //初始化行号
                        var c = 0;
                        //遍历数据
                        //this.ListItem.tableData.forEach(function (v, i) {
                        data.forEach(function (v, i) {
                            //第一条数据固定
                            if (i === 0) {
                                spanArr.push(1);

                            }
                            else {
                                //如果当前数据跟上一条数据id相同，则合并行数据+1，并且填充0合并行
                                if (v.id === data[i - 1].id) {
                                    spanArr[c] += 1;
                                    spanArr.push(0);
                                }
                                else {
                                    //如果不相同，则重置合并数量，且更改合并行数据组索引
                                    spanArr.push(1);
                                    c = i;
                                }
                            }
                        })

                        //console.log('End', this.spanArr);
                    },
                    //Dialog展示
                    InputInputStand: function (val, id) {
                        this.dialogTilte = "排查项目说明";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskContentEditStandardType.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    InputInputManagement: function (val, id) {
                        this.dialogTilte = "排查项目说明";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskContentEditStandardTypeManagement.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    closeDialog: function () {
                        //    this.getData();
                        console.log(this.Form)
                        console.log(this.Form.InputTable)
                        console.log(this.Form.Remark)
                        this.ListItem.tableData = this.Form.InputTable;
                        this.getSpanArr(this.ListItem.tableData);



                    },
                },
                mounted: function () {
                    //绑定下拉和tree
                    this.PersonInCharge = fn(this.mydata, "0");
                    this.Participant = fn(this.mydata, "0");
                    this.StandardType = getDicData('59');
                    this.InvestigationPost = getDicData('60');
                    //获取传值id
                    this.id = getUrlParam("id");

                    //读取数据
                    this.getData();
                    //读取数据到表格数据对象
                    this.ListItem.tableData = this.Form.InputTable;
                    //表格合并行
                    this.getSpanArr(this.ListItem.tableData);

                }
            });
        </script>
</body>

</html>